<template>
  <div id="app">
    <h1>单页面文件</h1>
    <!-- <button>首页</button>
    <button>第二页</button>
    <hr />
    <router-view /> -->
    <!-- router-link声明式 -->
    <!-- <router-link to="/home">首页</router-link>
    <router-link to="/about">第二页</router-link>
    <hr />
    <router-view /> -->
    <!-- 用js的编程式导航实现切换 -->
    <!-- $router.push()是追加地址 可以前进后退-->
    <!-- <button @click="$router.push('/home')">首页</button>
    <button @click="$router.push('/about')">第二页</button>
    <hr /> -->
    <!-- replace是替换地址 不可以前进后退，后退会推到app页面-->
    <!-- <router-link to="/home">首页</router-link>
    <router-link to="/about" replace>第二页</router-link> -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about" replace>第二页</router-link>
    <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
};
</script>
<style>
.router-link-active {
  color: blue;
}
</style>
